package com.hnly.djdl.home.p2

import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.VectorConverter
import androidx.compose.animation.core.animateValue
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.State
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.hnly.djdl.R
import com.hnly.djdl.components.MainBoxSurface
import com.hnly.djdl.components.SnackImage
import com.hnly.djdl.components.TitleText
import com.hnly.djdl.model.P2
import com.hnly.djdl.model.P3
import com.hnly.djdl.model.RecordTools
import com.hnly.djdl.model.Snack
import com.hnly.djdl.theme.MainMargin
import com.hnly.djdl.theme.MainTheme
import com.hnly.djdl.theme.MainThemeColor
import com.hnly.djdl.theme.MainTitleColor

const val GOTO_SPORT_NAV = 2
const val GOTO_KNOW_NAV = 3
const val GOTO_MINE_NAV = 4
const val GOTO_THINK_PAGE = 5
const val GOTO_STORY = 6
const val GOTO_CALC = 7

private val TOP_CARD_BACKGROUND = Color(0x99666b4b)
private val CARD_COLOR_1 = Color(0xff8a4f2d)
private val CARD_COLOR_2 = Color(0xff9f6e4e)
private val CARD_COLOR_3 = Color(0xffbfc2bb)
private val CARD_COLOR_4 = Color(0xff80866c)
private val CARD_COLOR_5 = Color(0xff6a6f5b)
private val CARD_COLOR_6 = Color(0xffd9bc3f)

private val pagePadding = 12.dp

@Composable
fun P2Page(
    modifier: Modifier = Modifier,
    clickToDetail: (snackId: Long) -> Unit,
    clickCard: (id: Int) -> Unit) {
    MainBoxSurface(modifier = modifier.fillMaxSize()) {
        LazyColumn {
            item {
                TitleText(
                    text = stringResource(id = R.string.app_name),
                    modifier = Modifier
                )
            }
            item { Spacer(modifier = Modifier.height(20.dp)) }
            item {
                FlowerAnimation(modifier = Modifier.align(Alignment.CenterStart))
            }
            item {
                LastRecords()
            }
            item { Spacer(modifier = Modifier.height(20.dp)) }
            item {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(horizontal = MainMargin),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    val m1 = P3.MENU_1
                    val m2 = P3.MENU_2
                    val m3 = P3.MENU_3
                    val m4 = P3.MENU_4
                    MainCenterMenu(m1.imageUrl, m1.name, onClick = {
                        clickCard.invoke(GOTO_STORY)
                    })
                    MainCenterMenu(m2.imageUrl, m2.name, onClick = {
                        clickCard.invoke(GOTO_CALC)
                    })
                    MainCenterMenu(m3.imageUrl, m3.name, onClick = {
                        clickCard.invoke(GOTO_KNOW_NAV)
                    })
                    MainCenterMenu(m4.imageUrl, m4.name, onClick = {
                        clickCard.invoke(GOTO_MINE_NAV)
                    })
                }
            }
            item { Spacer(modifier = Modifier.height(20.dp)) }
            item {
                BottomCards(
                    thinkCardClick = { clickCard.invoke(it) },
                    homeCardClick = clickToDetail
                )
            }
            item { Spacer(modifier = Modifier.height(20.dp)) }
        }
    }
}

@Composable
private fun BottomCards(thinkCardClick: (id: Int) -> Unit, homeCardClick: (id: Long) -> Unit) {
    val p1 = P2.CARD_1
    val p2 = P2.CARD_2
    val p3 = P2.CARD_3
    val p4 = P2.CARD_4
    val p5 = P2.CARD_5
    val p6 = P2.CARD_6
    Column(modifier = Modifier
        .padding(start = pagePadding, end = pagePadding)
        .fillMaxWidth()
        .wrapContentHeight()) {
        Row(modifier = Modifier.fillMaxWidth()) {
            BottomSingleCard(
                modifier = Modifier.weight(1f),
                title = p1.name,
                imgUrl = p1.imageUrl,
                backgroundColor = CARD_COLOR_1
            ) {
                homeCardClick.invoke(p1.id)
            }
            Spacer(modifier = Modifier.width(10.dp))
            BottomSingleCard(
                modifier = Modifier.weight(1f),
                title = p2.name,
                imgUrl = p2.imageUrl,
                backgroundColor = CARD_COLOR_2
            ) {
                homeCardClick.invoke(p2.id)
            }
        }
        Spacer(modifier = Modifier.height(10.dp))
        Row(modifier = Modifier.fillMaxWidth()) {
            BottomSingleCard(
                modifier = Modifier.weight(1f),
                title = p3.name,
                imgUrl = p3.imageUrl,
                backgroundColor = CARD_COLOR_3
            ) {
                homeCardClick.invoke(p3.id)
            }
            Spacer(modifier = Modifier.width(10.dp))
            BottomSingleCard(
                modifier = Modifier.weight(1f),
                title = p4.name,
                imgUrl = p4.imageUrl,
                backgroundColor = CARD_COLOR_4
            ) {
                homeCardClick.invoke(p4.id)
            }
        }
        Spacer(modifier = Modifier.height(10.dp))
        Row(modifier = Modifier.fillMaxWidth()) {
            BottomSingleCard(
                modifier = Modifier.weight(1f),
                title = p5.name,
                imgUrl = p5.imageUrl,
                backgroundColor = CARD_COLOR_5
            ) {
                homeCardClick.invoke(p5.id)
            }
            Spacer(modifier = Modifier.width(10.dp))
            BottomSingleCard(
                modifier = Modifier.weight(1f),
                title = p6.name,
                imgUrl = p6.imageUrl,
                backgroundColor = CARD_COLOR_6
            ) {
                homeCardClick.invoke(p6.id)
            }
        }
    }
}

@Composable
private fun BottomSingleCard(
    modifier: Modifier,
    title: String,
    imgUrl: String,
    backgroundColor: Color,
    onClick: () -> Unit,
) {
    Card(
        modifier = modifier
            .fillMaxWidth()
            .height(100.dp)
            .clip(RoundedCornerShape(8.dp))
            .clickable(onClick = onClick),
        backgroundColor = backgroundColor
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(start = MainMargin, top = MainMargin, end = MainMargin)
        ) {
            Text(
                text = title,
                style = TextStyle.Default.copy(
                    fontSize = 20.sp,
                    fontWeight = FontWeight.W900,
                    color = Color.White
                ),
                modifier = Modifier.fillMaxWidth()
            )
            SnackImage(
                imageUrl = imgUrl,
                contentDescription = null,
                modifier = Modifier
                    .align(Alignment.BottomEnd)
                    .size(60.dp),
            )
        }
    }
}

@Composable
private fun MainCenterMenu(imgUrl: String, title: String, onClick: () -> Unit) {
    Column(
        modifier = Modifier.clickable(onClick = onClick),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        SnackImage(
            imageUrl = imgUrl,
            contentDescription = null,
            modifier = Modifier
                .size(60.dp)
                .clip(RoundedCornerShape(8.dp)),
        )
        Text(text = title, style = TextStyle.Default.copy(fontSize = 18.sp, color = MainTitleColor))
    }
}

@Composable
private fun LastRecords() {
    val lines: State<List<Snack>> = RecordTools.lines.collectAsState()
    LazyColumn(
        modifier = Modifier
            .fillMaxWidth()
            .height(180.dp)
            .padding(start = pagePadding, end = pagePadding, top = 10.dp, bottom = 10.dp)
            .clip(RoundedCornerShape(8.dp))
            .background(MainThemeColor.copy(0.2f))
    ) {
        items(lines.value.size) { index ->
            val snack = lines.value[index]
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 12.dp, end = 12.dp, top = 10.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                SnackImage(imageUrl = snack.imageUrl, modifier = Modifier.size(40.dp))
                Spacer(modifier = Modifier.width(10.dp))
                Text(
                    text = snack.name,
                    modifier = Modifier.fillMaxHeight(),
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                    style = TextStyle.Default.copy(color = MainTitleColor)
                )
            }
        }
    }
}

@Composable
private fun MainTopCard(
    modifier: Modifier = Modifier,
    hour: Int,
    sec: Int,
    title: String,
    onClick: () -> Unit,
) {
    Box(
        modifier = modifier
            .height(100.dp)
            .fillMaxWidth()
            .clip(RoundedCornerShape(20.dp))
            .background(TOP_CARD_BACKGROUND)
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .clickable(onClick = onClick)
                .padding(12.dp),
            verticalArrangement = Arrangement.SpaceAround
        ) {
            Row {
                Box(
                    modifier = Modifier
                        .size(10.dp)
                        .clip(CircleShape)
                        .background(MainTitleColor)
                )
                Spacer(modifier = Modifier.weight(1f))
                Box(
                    modifier = Modifier
                        .size(10.dp)
                        .clip(CircleShape)
                        .background(MainTitleColor)
                )
            }
            Text(text = buildAnnotation(hour, sec))
            Text(text = title)
        }
    }
}

private fun buildAnnotation(hour: Int, sec: Int): AnnotatedString {
    return buildAnnotatedString {
        withStyle(style = SpanStyle(color = MainTitleColor, fontSize = 20.sp)) {
            append("$hour")
        }
        withStyle(style = SpanStyle(color = MainTitleColor, fontSize = 10.sp)) {
            append(" 时")
        }
        withStyle(style = SpanStyle(color = MainTitleColor, fontSize = 20.sp)) {
            append(" $sec")
        }
        withStyle(style = SpanStyle(color = MainTitleColor, fontSize = 10.sp)) {
            append(" 分")
        }
    }
}

//@Composable
//private fun StaticImage(modifier: Modifier) {
//    Image(
//        painter = painterResource(id = R.drawable.img),
//        contentDescription = null,
//        modifier = modifier
//            .padding(start = 10.dp)
//            .size(150.dp)
//            .scale(1.4f),
//        contentScale = ContentScale.FillBounds,
//    )
//}

@Composable
private fun FlowerAnimation(modifier: Modifier) {
    val frames = listOf(
        R.drawable.spider_1,
        R.drawable.spider_2,
        R.drawable.spider_3,
        R.drawable.spider_4,
        R.drawable.spider_5,
        R.drawable.spider_6,
        R.drawable.spider_7,
        R.drawable.spider_8,
        R.drawable.spider_9,
        R.drawable.spider_10,
        R.drawable.spider_11,
//        R.drawable.spider_12,
//        R.drawable.spider_13,
//        R.drawable.spider_14,
//        R.drawable.spider_15,
//        R.drawable.spider_16,
//        R.drawable.spider_17,
//        R.drawable.spider_18,
//        R.drawable.spider_19,
//        R.drawable.spider_20,
//        R.drawable.spider_21,
//        R.drawable.spider_22,
//        R.drawable.spider_23,
//        R.drawable.spider_24,
//        R.drawable.spider_25,
//        R.drawable.spider_26,
//        R.drawable.spider_27,
//        R.drawable.spider_28,
//        R.drawable.spider_29,
//        R.drawable.spider_30,
//        R.drawable.spider_31,
//        R.drawable.spider_32,
//        R.drawable.spider_33,
//        R.drawable.spider_34,
//        R.drawable.spider_35,
//        R.drawable.spider_36,
//        R.drawable.spider_37,
//        R.drawable.spider_38,
//        R.drawable.spider_39,
//        R.drawable.spider_40,
//        R.drawable.spider_41,
//        R.drawable.spider_42,
//        R.drawable.spider_43,
//        R.drawable.spider_44,
//        R.drawable.spider_45,
//        R.drawable.spider_46,
//        R.drawable.spider_47,
//        R.drawable.spider_48,
//        R.drawable.spider_49,
//        R.drawable.spider_50,
//        R.drawable.spider_51,
//        R.drawable.spider_52,
//        R.drawable.spider_53,
//        R.drawable.spider_54,
//        R.drawable.spider_55,
//        R.drawable.spider_56,
//        R.drawable.spider_57,
//        R.drawable.spider_58,
//        R.drawable.spider_59,
//        R.drawable.spider_60,
    )
    val infiniteTransition = rememberInfiniteTransition()
    val frameIndex by infiniteTransition.animateValue(
        initialValue = 0,
        targetValue = frames.size - 1,
        typeConverter = Int.VectorConverter,
        animationSpec = infiniteRepeatable(
            animation = tween(10000, easing = LinearEasing), repeatMode = RepeatMode.Restart
        )
    )
    Image(
        painter = painterResource(id = frames[frameIndex]),
        contentDescription = null,
        modifier = modifier
            .fillMaxWidth()
            .height(200.dp),
        contentScale = ContentScale.FillBounds,
    )
}

@Preview("default")
@Composable
fun P2PagePreview() {
    MainTheme {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(1000.dp)
        ) {
            P2Page(Modifier, {}, {})
        }
    }
}
